<template>
    <div>
        <div class="outer">
            <el-container>
                <el-header>
                    <div class="left">
                        <el-image style="width: 73px; height: 60px" :src="require(`../assets/首页2_r2_c1.png`)"
                            :fit="fit"></el-image>
                        <div class="title">
                            <div class="line1">
                                进思教育后台
                            </div>
                            <div class="line2">
                                back-stage-managemant
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="inn"><i class="el-icon-star-on"></i>卓心思创</div>
                        <div class="inn"><i class="el-icon-s-help"></i>在线客服</div>
                        <div class="inn"><i class="el-icon-picture-outline-round"></i>常见问题</div>
                        <div class="inn" @click="openChangePsw"><i class="el-icon-document-remove"></i>安全中心</div>
                        <div class="inn"><i class="el-icon-star-on"></i>退出</div>
                        <div class="inn">用户名</div>
                        <el-image style="width: 50px; height: 60px" :src="require(`@/assets/logo.png`)" :fit="fit"
                            class="codeimg"></el-image>
                    </div>
                </el-header>
                <el-container>
                    <el-aside :width="!isCollapse ? '250px' : '64px'">
                        <!-- <el-button type="primary" @click="clickFold" class="controler">dianji</el-button> -->
                        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="isCollapse"
                            text-color="#ffffff" background-color="#1A225A" unique-opened active-text-color="#ffd04b"
                            router>
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-document"></i>
                                    <router-link to="/layout">
                                        <span>首页</span>
                                    </router-link>
                                </template>
                                <el-menu-item-group>
                                    <!-- <el-menu-item index="/Indexx" route="">系统介绍</el-menu-item> -->
                                </el-menu-item-group>
                            </el-submenu>
                            <el-submenu index="2">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>用户管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="管理员" route="/layout/admin">管理员</el-menu-item>
                                    <el-menu-item index="学员管理" route="/layout/stu">学员管理</el-menu-item>

                                </el-menu-item-group>
                            </el-submenu>
                            <el-submenu index="3">
                                <template slot="title">
                                    <i class="el-icon-document-copy"></i>
                                    <span>课程管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="/EnterExamScoreInquire" route="/layout/add">课程添加</el-menu-item>
                                    <el-menu-item index="/MidExamScoreInquire" route="/layout/list">课程列表</el-menu-item>
                                    <el-menu-item index="/EndExamScoreInquire" route="/layout/mudel">课程模块</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu>
                    </el-aside>
                    <el-main>
                        <BreadCrumb @click="clickFold"></BreadCrumb>
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </div>
        <changePassword></changePassword>
    </div>
</template>

<script>
import { Container, Header, Aside, Main, Menu, Submenu, MenuItemGroup, MenuItem } from "element-ui"
import BreadCrumb from "@/components/BreadCrumb.vue"
import changePassword from "../components/changePassword.vue"
export default {
    data() {
        return {
            isCollapse: false,
            fit: "fit"
        }
    },
    methods: {
        clickFold() {
            this.isCollapse = !this.isCollapse
        },
        openChangePsw() {
            this.$eventBus.$emit("openChangePsw", true)
        }
    },
    components: {
        "el-container": Container,
        "el-header": Header,
        "el-aside": Aside,
        "el-main": Main,
        "el-menu": Menu,
        "el-submenu": Submenu,
        "el-menu-item-group": MenuItemGroup,
        "el-menu-item": MenuItem,
        "BreadCrumb": BreadCrumb,
        "changePassword": changePassword
    },
    mounted() {
        this.$eventBus.$off("changeBar")
        var that = this
        this.$eventBus.$on("changeBar", function () {
            that.clickFold()
        })
    }
}
</script>

<style lang="less" scoped>
.outer {
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(135deg, #131C55, #A492A6);
}

.el-container {
    height: 100%;
}

.el-header {
    background-image: linear-gradient(to right, #3D4575, #85809D);
    color: #333;
    // text-align: center;
    line-height: 60px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        display: flex;

        .title {
            display: flex;
            flex-direction: column;
            color: aliceblue;
            justify-content: center;

            .line1 {
                height: 35px;
                line-height: 35px;
                font-size: 24px;
                font-weight: 900;
            }

            .line2 {
                height: 16px;
                line-height: 16px;
            }
        }
    }

    .right {
        display: flex;

        .inn {
            margin: 0 10px;
            color: aliceblue;
        }
    }
}

.el-aside {

    color: #333;
    text-align: left;
    // line-height: 200px;
    width: 250px;
    position: relative;
    overflow: visible;

    i {
        color: #909399;
    }

    /deep/.el-menu-item-group__title {
        display: none;
    }

    .el-menu {
        height: 100%;
        border: 0;
        color: aliceblue;
    }

    .controler {
        // position: absolute;
        top: 0;
        z-index: 899;
        // left: 250px;
        float: right;
        right: 50px;
    }


}

.el-main {
    // background-color: #E9EEF3;
    color: #333;
    // text-align: center;
    // line-height: 160px;
    padding: 0 30px;
}
</style>